<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title>选择框</title>
		<link href="css/mobiscroll.css" rel="stylesheet">
		<link href="css/mobiscroll_date.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<script src="js/mobiscroll_date.js" charset="gb2312"></script>
		<script src="js/mobiscroll.js"></script>
	</head>

	<body style="text-align: center;">
		<input id="demo1" type="text" readonly placeholder="填写日期"><br>
		<input id="demo2" type="text" readonly placeholder="填写时间"><br>
		<input type="button" value="di" onclick="dia()"><br>
		<script>
			var input1;
			$(function() {
				input1 = $("#demo1").mobiscroll({
					preset: 'date',
					theme: 'android-ics light', //皮肤样式
					display: 'bottom', //显示方式 :center inline bubble top bottom modal
					mode: 'scroller', //选择模式
					dateFormat: 'yyyy/mm/dd',
					lang: 'zh',
					showNow: true,
					nowText: "今天",
					startYear: 2000, //开始年份
					endYear: 2100, //结束年份
					onClose: function(valueText, btn, inst) {
						if('set' == btn) {
							alert(valueText);
							alert(JSON.stringify(inst));
						}
					},
					onSet: function(event, inst) {
						alert('e');
					},
					onCancel: function(event, inst) {}
				});
				$("#demo2").mobiscroll({
					preset: 'time',
					timeWheels: 'HHiiss',
					theme: 'android-ics light', //皮肤样式
					display: 'modal', //显示方式 
					mode: 'scroller', //选择模式
					timeFormat: 'HH:ii:ss',
					lang: 'zh',
					showNow: true,
					nowText: "现在",
					onClose: function(valueText, btn, inst) {
						if('set' == btn) {
							alert(JSON.stringify(inst));
						}
					}
				});
			});

			function dia() {
				alert('d');
				alert(JSON.stringify(input1));
			}
		</script>
	</body>

</html>